<template>
	<view class="page">
		<navHead :datas="datasObj"></navHead>
		<view class="content_box w-100 pd-30">
			<view class="card_box">
				<view class="card_item  mb-20 bd-r40 pd-20" v-for="(item, index) in integralList" :key="index">
					<view class="time ft-22 c-66">
						{{ '兑换时间 ' + item.created_at }}
					</view>
					<view class="item_content flex pd-20  bd-r40 mt-20">
						<image class="imgBox bd-r40" :src="item.cover" mode="aspectFill">
						</image>

						<view class="contents ml-20 te-wid">
							<view class="text ft-32 ft1 te-1">{{ item.name }}</view>
							<view class="ft-24 c-99 mt-20">
								{{ item.name }} ×{{ item.num }} <span style="color: #FF0000;">（-
									{{ item.total_integral }}积分）</span>
							</view>
							<view class="ft-24 c-99 mt-20">
								物流信息 <span style="color: #1F18EE;">{{ item.express_status }}</span>
							</view>
							<view class="btn_box ft-24 flex-end">
								<view class="btn" @click="goPage('/subpackage/integral/integralDetail?id=' + item.id)">
									查看详情
								</view>
							</view>

						</view>

					</view>

				</view>
				<view class="com-empty" v-if="integralList.length == 0">暂无数据</view>
			</view>
		</view>
		<view :style="{ height: (98 + 68) + 'rpx' }"></view>


	</view>
</template>

<script setup lang="js">
import navHead from '@/components/navHead.vue'
import {
	reactive,
	ref
} from 'vue';
import {
	utils
} from '@/utils/utils.js';
import {
	api
} from '@/utils/api.js';
import {
	onLoad,
	onReachBottom
} from "@dcloudio/uni-app";

let datasObj = reactive({
	title: '兑换历史',
	img: 'https://cdn.oss.bon-top.cn/static_bc/images/integralShopping_banner.png',
	color: '#fff',
	direction: '',
	scrollTop: 0,
	backisImg: false,//导航文字模块的背景图
	headerisImg: false,//整个huader模块的背景图
	fullImag: false,//header是否显示完整的图片
})
// 跳转
const goPage = (url) => {
	uni.navigateTo({
		url: url,
	});
}

const reloadData = () => {
	integralPage.value = 1
	integralList.value = []
	integralLoading.value = true
	getIntegralListData()
}

const integralPage = ref(1)
const integralList = ref([])
const integralLoading = ref(true)
const detail = ref({})
const getIntegralListData = () => {
	if (!integralLoading.value) {
		return
	}
	uni.showLoading()
	integralLoading.value = false
	utils
		.request(
			api.getIntegralOrderList, {
			page: integralPage.value,
			pageSize: 10
		},
			"get"
		)
		.then((res) => {
			if (Object.keys(detail.value).length == 0) {
				detail.value = res.data
			}
			integralPage.value++
			if (res.data.items.length > 0) {
				integralList.value = integralList.value.concat(res.data.items)
			}
			if (integralPage.value <= res.data.pageInfo.totalPage) {
				integralLoading.value = true
			}
			uni.hideLoading()
		});
}

onLoad((options) => {
	getIntegralListData()
})

onReachBottom(() => {
	getIntegralListData()
})
</script>

<style lang="scss" scoped>
.content_box {

	.card_box {
		.card_item {
			border: 2rpx solid #F1F1F1;
			background-color: #F8F8F8;

			.item_content {
				background-color: #fff;
			}

			box-sizing: border-box;

			.imgBox {
				width: 186rpx;
				height: 232rpx;
			}


			.btn {

				padding: 12rpx 20rpx;
				background: #DBF046;
				border-radius: 16rpx;

			}


		}
	}
}
</style>